<template>
  <div>
    <my-left :list="list">
      <template #default="{ id }">
        <button @click="del(id)">删除</button>
      </template>
    </my-left>
    <my-left :list="goods">
      <button>编辑</button>
      <button>查看详情</button>
    </my-left>
  </div>
</template>

<script>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup

import MyLeft from "@/components/MyLeft.vue";
import MyRight from "@/components/MyRight.vue";
export default {
  components: { MyLeft, MyRight },
  data() {
    return {
      list: [
        { id: 2, name: "关羽" },
        { id: 4, name: "张飞" },
        { id: 5, name: "赵云" },
        { id: 7, name: "黄忠" },
        { id: 8, name: "马超" },
      ],
      goods: [
        { id: 2, name: "方便面" },
        { id: 4, name: "鸡爪子" },
        { id: 5, name: "火腿肠" },
        { id: 7, name: "大辣条" },
        { id: 8, name: "卤鸡蛋" },
      ],
    };
  },
  methods: {
    del(id) {
      this.list = this.list.filter((item) => item.id != id);
    },
  },
};
</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
